<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>疫情大数据可视化</title>
    <link rel="stylesheet" href="./styles/index.css">
    <link rel="stylesheet" href="./fonts/icomoon.css">
</head>

<body>
    <div class="viewport">
        <div class="column">
            <!--概览-->
            <div class="overview panel">
                <div class="inner">
                    <div class="item">
                        <h4>80,570</h4>
                        <span>
                            确诊总人数
                        </span>
                    </div>
                    <div class="item">
                        <h4>25,173</h4>
                        <span>
                            现有确诊
                        </span>
                    </div>
                    <div class="item">
                        <h4>52,381</h4>
                        <span>
                            累计治愈
                        </span>
                    </div>
                    <div class="item">
                        <h4>3,016</h4>
                        <span>
                            累计死亡
                        </span>
                    </div>
                </div>
            </div>
            <!--监控-->
            <div class="monitor panel">
                <div class="inner">
                    <div class="tabs">
                        <a href="javascript:;" data-index="0" class="active">各省累计确诊</a>
                        <a href="javascript:;" data-index="1">各省累计治愈</a>
						<a href="javascript:;" data-index="2">各省累计死亡</a>
                    </div>
                    <div class="content" style="display: block;">
                        <div class="head">
                            <span class="col">序号</span>
                            <span class="col">地区</span>
                            <span class="col">人数</span>
                        </div>
                        <div class="marquee-view">
                            <div class="marquee">
                                <div class="row">
                                    <span class="col">01</span>
                                    <span class="col">湖北</span>
                                    <span class="col">67,592</span>
                                </div>
                                <div class="row">
                                    <span class="col">02</span>
                                    <span class="col">广东</span>
                                    <span class="col">1,351</span>
                                </div>
                                <div class="row">
                                    <span class="col">03</span>
                                    <span class="col">河南</span>
                                    <span class="col">1,272</span>
                                </div>
                                <div class="row">
                                    <span class="col">04</span>
                                    <span class="col">浙江</span>
                                    <span class="col">1,215</span>
                                </div>
                                <div class="row">
                                    <span class="col">05</span>
                                    <span class="col">湖南</span>
                                    <span class="col">1,018</span>
                                </div>
                                <div class="row">
                                    <span class="col">06</span>
                                    <span class="col">安徽</span>
                                    <span class="col">990</span>
                                </div>
                                <div class="row">
                                    <span class="col">07</span>
                                    <span class="col">江西</span>
                                    <span class="col">935</span>
                                </div>
                                <div class="row">
                                    <span class="col">08</span>
                                    <span class="col">山东</span>
                                    <span class="col">758</span>
                                </div>
                                <div class="row">
                                    <span class="col">09</span>
                                    <span class="col">江苏</span>
                                    <span class="col">631</span>
                                </div>
                                <div class="row">
                                    <span class="col">10</span>
                                    <span class="col">重庆</span>
                                    <span class="col">576</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="content">
                        <div class="head">
                            <span class="col">序号</span>
                            <span class="col">地区</span>
                            <span class="col">人数</span>
                        </div>
                        <div class="marquee-view">
                            <div class="marquee">
                                <div class="row">
                                    <span class="col">01</span>
                                    <span class="col">湖北</span>
                                    <span class="col">42,054</span>
                                </div>
                                <div class="row">
                                    <span class="col">02</span>
                                    <span class="col">广东</span>
                                    <span class="col">1,210</span>
                                </div>
                                <div class="row">
                                    <span class="col">03</span>
                                    <span class="col">河南</span>
                                    <span class="col">1,242</span>
                                </div>
                                <div class="row">
                                    <span class="col">04</span>
                                    <span class="col">浙江</span>
                                    <span class="col">1,154</span>
                                </div>
                                <div class="row">
                                    <span class="col">05</span>
                                    <span class="col">湖南</span>
                                    <span class="col">952</span>
                                </div>
                                <div class="row">
                                    <span class="col">06</span>
                                    <span class="col">安徽</span>
                                    <span class="col">973</span>
                                </div>
                                <div class="row">
                                    <span class="col">07</span>
                                    <span class="col">江西</span>
                                    <span class="col">908</span>
                                </div>
                                <div class="row">
                                    <span class="col">08</span>
                                    <span class="col">山东</span>
                                    <span class="col">602</span>
                                </div>
                                <div class="row">
                                    <span class="col">09</span>
                                    <span class="col">江苏</span>
                                    <span class="col">588</span>
                                </div>
                                <div class="row">
                                    <span class="col">10</span>
                                    <span class="col">重庆</span>
                                    <span class="col">513</span>
                                </div>
                            </div>
                        </div>
                    </div>
					<div class="content">
                        <div class="head">
                            <span class="col">序号</span>
                            <span class="col">地区</span>
                            <span class="col">人数</span>
                        </div>
                        <div class="marquee-view">
                            <div class="marquee">
                                <div class="row">
                                    <span class="col">01</span>
                                    <span class="col">湖北</span>
                                    <span class="col">2,931</span>
                                </div>
                                <div class="row">
                                    <span class="col">02</span>
                                    <span class="col">广东</span>
                                    <span class="col">7</span>
                                </div>
                                <div class="row">
                                    <span class="col">03</span>
                                    <span class="col">河南</span>
                                    <span class="col">22</span>
                                </div>
                                <div class="row">
                                    <span class="col">04</span>
                                    <span class="col">浙江</span>
                                    <span class="col">1</span>
                                </div>
                                <div class="row">
                                    <span class="col">05</span>
                                    <span class="col">湖南</span>
                                    <span class="col">4</span>
                                </div>
                                <div class="row">
                                    <span class="col">06</span>
                                    <span class="col">安徽</span>
                                    <span class="col">6</span>
                                </div>
                                <div class="row">
                                    <span class="col">07</span>
                                    <span class="col">江西</span>
                                    <span class="col">1</span>
                                </div>
                                <div class="row">
                                    <span class="col">08</span>
                                    <span class="col">山东</span>
                                    <span class="col">6</span>
                                </div>
                                <div class="row">
                                    <span class="col">09</span>
                                    <span class="col">江苏</span>
                                    <span class="col">0</span>
                                </div>
                                <div class="row">
                                    <span class="col">10</span>
                                    <span class="col">重庆</span>
                                    <span class="col">6</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--点位-->
            <div class="point panel">
                <div class="inner">
                    <h3>确诊分布统计</h3>
                    <div class="chart">
                        <div class="pie"></div>
                        <div class="data">
                            <div class="item">
                                <h4>80,570</h4>
                                <span>
                                    全国累计确诊
                                </span>
                            </div>
                            <div class="item">
                                <h4>67,466</h4>
                                <span>
                                    湖北累计确诊
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="column">
            <!-- 地图 -->
            <div class="map">
                <h3>
                    全国疫情累计感染人数
                </h3>
                <div class="chart">
                    <div class="geo"></div>
                </div>
            </div>
            <!-- 用户 -->
            <div class="users panel">
                <div class="inner">
                    <h3>全国疫情统计</h3>
                    <div class="chart">
                        <div class="bar"></div>
                        <div class="data">
                            <div class="item">
                                <h4>25,173</h4>
                                <span>
                                    全国现有确诊
                                </span>
                            </div>
                            <div class="item">
                                <h4>23,898</h4>
                                <span>
                                    湖北省现有确诊
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="column">
            <!-- 订单 -->
            <div class="order panel">
                <div class="inner">
                    <!-- 筛选 -->
                    <div class="filter">
                        <a href="javascript:;" data-key="day365" class="active">今日新增</a>
                        <a href="javascript:;" data-key="day90">近3天</a>
                        <a href="javascript:;" data-key="day30">近一周</a>
                        <a href="javascript:;" data-key="day1">累计</a>
                    </div>
                    <!-- 数据 -->
                    <div class="data">
                        <div class="item">
                            <h4>143</h4>
                            <span>
                                确诊人数
                            </span>
                        </div>
                        <div class="item">
                            <h4>2,195</h4>
                            <span>
                                治愈人数
                            </span>
                        </div>
						<div class="item">
                            <h4>31</h4>
                            <span>
                                死亡人数
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 销售额 -->
            <div class="sales panel">
                <div class="inner">
                    <div class="caption">
                        <h3>疫情趋势</h3>
                        <a href="javascript:;" class="active" data-type="year">新增确诊</a>
                        <a href="javascript:;" data-type="quarter">新增疑似</a>
                        <a href="javascript:;" data-type="month">新增治愈</a>
                        <a href="javascript:;" data-type="week">新增死亡</a>
                    </div>
                    <div class="chart">
                        <div class="label">人数</div>
                        <div class="line"></div>
                    </div>
                </div>
            </div>
            <!-- 渠道 季度 -->
            <div class="wrap panel">
                <div class="inner">
					<div id='kgh' class="chart">
					</div>
				</div>
            </div>
            <!-- 排行榜 -->
            
		</div>
    </div>
</body>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/echarts.min.js"></script>
<script src="scripts/index.js"></script>
<script src="scripts/china.js"></script>
<script src="scripts/mymap.js"></script>
<script src="scripts/NCP_kg_oridata.js"></script>
<script src="scripts/NCP_kg_deal.js"></script>
<script type="text/javascript">
        
        var option111 = {
            title: {
                text: "每日累计确诊人数",
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "shadow",
                },
            },
            grid: {
                borderWidth: 0,
                top: 100,
                bottom: 95,
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']},
                    restore: {},
                    saveAsImage: {}
                }
            },
            calculable: true,
            xAxis: [{
                type: "category",
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: true
                },
                splitArea: {
                    show: false
                },
                axisLabel: {
                    interval: 0,
                },
                data: ['1.10','1.11', '1.12', '1.13', '1.14', '1.15', '1.16', '1.17', '1.18', '1.19', '1.20', '1.21', '1.22',
                '1.23', '1.24', '1.25', '1.26','1.27','1.28', '1.29', '1.30', '1.31', '2.1', '2.2',
                '2.3', '2.4', '2.5', '2.6','2.7','2.8','2.9']
            }],
            yAxis: [{
                type: "value",
                splitLine: {
                    show: true
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    interval: 0,
                },
                splitArea: {
                    show: false
                },
            }],
            dataZoom: [{
                show: true,
                height: 30,
                xAxisIndex: [
                    0
                ],
                bottom: 30,
                start: 10,
                end: 80,
                handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                handleSize: '110%',
            }, {
                type: "inside",
                show: true,
                height: 15,
                start: 1,
                end: 35
            }],
            series: [{
                name: '累计确诊人数',
                type: "line",
                symbolSize:10,
                symbol:'circle',
                smooth: true,
                itemStyle: {
                    normal: {
                        //color: "rgba(252,230,48,1)",
                        barBorderRadius: 0,
                        label: {
                            show: true,
                            position: "top",
                            formatter: function(p) {
                                return p.value > 0 ? (p.value) : '';
                            }
                        }
                    }
                },
                data:  [41,41, 41, 41, 41, 41, 45, 62, 121, 198, 291, 440, 571, 830, 1287, 1975, 2744, 4515,
                    5974, 7711, 9692, 11791, 14380, 17205, 20438, 24324, 28018, 31161,34546,37198,40171]
            }]
        }
        window.onload = function(){
                function box(){
                //获取DIV为'box'的盒子
                var oBox = document.getElementById('main');
                //获取元素自身的宽度
                var L1 = oBox.offsetWidth;
                //获取元素自身的高度
                var H1 = oBox.offsetHeight;
                //获取实际页面的left值。（页面宽度减去元素自身宽度/2）
                var Left = (document.documentElement.clientWidth-L1)/2;
                //获取实际页面的top值。（页面宽度减去元素自身高度/2）
                var top = (document.documentElement.clientHeight-H1)/2;
                oBox.style.left = Left+'px';
                oBox.style.top = top+'px';
                }
                box();
                //当浏览器页面发生改变时，DIV随着页面的改变居中。
                window.onresize = function(){
                    box();
                } 
            }
		var myChart = echarts.init(document.getElementById('kgh'));
    
            // 指定图表的配置项和数据
            var option = {
				title: {
                    text: '疫情知识图谱',
                    textStyle: {
                        color: '#ffffff',
                        fontSize: 25
                    },
                    left:110,
                    top:0,
                },
                tooltip: {},
                legend: [{
                    show: true,
                    top: 'bottom',
					textStyle: {
						color: '#ffffff',
					},
                    // orient: 'vertical',
                    // x:'left',      //可设定图例在左、右、居中
                    // y:'top', 
                    data: ['病患','城市','医院']
                }],
                
                series: {
                    type: 'graph',
                    layout: 'force',
                    edgeSymbol: ['circle','arrow'],
                    categories: [{name:'病患'},{name:'城市'},{name:'医院'}],
                    
                    roam: true,
                    force: {
                        repulsion: 1000
                    },
                    data: data,
                    links: link,
					//links: {
					//	: link,
					//	lineStyle: {color: "#ffffff"}
					//}
                }
            };

            function displacontent(param){
                var dataq = param.data;
                document.getElementById("context").innerHTML=dataq.name;
                for (var i in oridata) {
                    if (('病例'+oridata[i].name)==dataq.name) {//用于匹配节点的解释
                        
                        document.getElementById("context").innerHTML=oridata[i].des;
                        break;
                    }
                    else{
                        document.getElementById("context").innerHTML = '请将鼠标移至病患'
                    }
                }
            }
		myChart.setOption(option);
    </script>
</html>